<template>
  <div>
    <v-header></v-header>
    <div>
    <div class="ris_cont">
      <div class="ris_cont_headHint">用户信息维护<div class="ris_cont_headHint_add" @click="add_user()">+</div></div>
      <div class="ris_cont_dept" v-loading="loading">
        <table class="ris_cont_dept_tab">
          <tr>
            <th>编号</th>
            <th>用户名</th>
            <th>登录名</th>
            <!--<th>密码</th>-->
            <th>电子签名</th>
            <!--<th>email</th>-->
            <th>系统角色</th>
            <th>归属系统</th>
            <th>归属编号</th>
            <th>Ris医生</th>
            <th>是否使用</th>
            <th>排序号</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          <tr v-for="(user,index) in  SysUsers">
            <td>{{user.code}}</td>
            <td>{{user.name}}</td>
            <td>{{user.username}}</td>
            <!--<td>******</td>-->
            <td>
              <span v-if="user.signUrl==undefined">无</span>
              <span v-if="user.signUrl!=undefined">有</span>
            </td>
            <!--<td>{{user.email}}</td>-->
            <td>{{user.actorname}}</td>
            <td>{{user.source}}</td>
            <td>{{user.sourcecode}}</td>
            <td>{{user.usepacs | usePacsfileter}}</td>
            <td>{{user.isuse | usefilter}}</td>
            <td>{{user.sortnum}}</td>
            <td :title="user.memo">{{user.memo | length6}}</td>
            <!--<td>{{user.pycode}}</td>-->
            <td>
              <button class="ris_cont_dept_tab_change button" @click="update(user.id,user.code,user.name,user.username,user.password,user.email,user.source,user.sourcecode,user.isuse,user.sortnum,user.memo,user.actorcode,user.usepacs)">修改</button>
              <button class="ris_cont_dept_tab_delete bg_yellow button" @click="deleteSysUser(user.code,user.id)">删除</button>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!--新增或修改模态-->
    <div class="ris_dept_modal9" v-show="ks_motai">
      <div>
        <p class="ris_dept_modal_head9">用户信息设置<span class="ris_dept_modal_btn_close"@click="qvxiao()">X</span></p>
        <table class="ris_dept_modal_tab9">
          <tr>
          <td>用户名称</td>
          <td><input type="text" v-model="name" ></td>
        </tr>
          <tr>
            <td>登录名称</td>
            <td><input type="text" v-model="username"></td>
          </tr>
          <tr>
            <td>密码</td>
            <td><input type="password" v-model="password" ></td>
          </tr>
          <tr>
            <td>系统角色</td>
            <td>
              <select v-model="actorcode">
                <option></option>
                <option v-for="ac in actors" :value="ac.code">{{ac.name}}</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>email</td>
            <td><input type="text" v-model="email" ></td>
          </tr>
          <tr>
            <td>归属系统</td>
            <td><input type="text" v-model="source" ></td>
          </tr>
          <tr>
            <td>归属编号</td>
            <td><input type="text" v-model="sourcecode" ></td>
          </tr>
          <tr>
            <td>是否使用</td>
            <td>
              <select v-model="isuse">
                <option value="1" selected >是</option>
                <option value="0">否</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>Ris医生</td>
            <td>
              <select v-model="usepacs">
                <option value="1" selected >是</option>
                <option value="0">否</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>排序号</td>
            <td><input type="number" v-model="usersortnum"></td>
          </tr>
          <!--<tr>-->
            <!--<td>是否使用</td>-->
            <!--<td>-->
              <!--<select v-model="isuse">-->
                <!--<option value="1" selected >是</option>-->
                <!--<option value="2">否</option>-->
              <!--</select>-->
            <!--</td>-->
          <!--</tr>-->
          <tr>
          <td>备注</td>
          <td>
          <textarea v-model="memo"></textarea>
          </td>
          </tr>
        </table>
        <div class="ris_dept_modal_btn9">
          <button class="ris_cont_dept_tab_delete bg_green button" @click="showSignBox(userid)">上传签名</button>
          <button @click="queren()">确认</button>
          <button class="ris_dept_modal_btn_close" @click="qvxiao()">取消</button>
        </div>
      </div>
    </div>
    </div>

    <el-dialog title="上传电子签名" :visible.sync="signBox" width="320px" center>
      <div style="text-align: center !important;">
        <el-upload
          class="avatar-uploader"
          :action=uploadUrl()
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :with-credentials="true">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSignBox()">取 消</el-button>
        <el-button type="primary" @click="saveSign()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import Header from '@/components/Header/Header';
  import { MessageBox,Notification } from 'element-ui'
  //  import OtherComponent from './components/other.vue'

  export default {
    components: {
      'v-header': Header
    },
    created(){
      this.loading=true
      this.$http.get(window.localStorage.url+"/BaseSysUser/findsysUser")
        .then(function (res) {
          this.loading=false
          if(res.data.status=='SUCCESS') {
            this.SysUsers=res.data.data;
          }
        });




    },
    data() {
      return {
        msg: 'hello vue',
        //所有的
        SysUsers:"",
        ks_motai:false,
        //最大排序号
        usersortnum:"",
        //添加 1 修改 2 删除 3
        variate:0,


        userid:"",
        usercode:"",
        name:"",
        username:"",
        password:"",
        email:"",
        isuse:"",
        source:"",
        sourcecode:"",
        memo:"",
        usepacs:1,//区分是全院医生还是pasc
//        sortnum:"",
      //角色
        actors:"",
        actorcode:"",
        loading: false,
        signBox: false,
        imageUrl: '',
        code:'',
        signUrl:'',
        sysUser:''
      }
    },
    methods:{
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.signUrl = res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      uploadUrl() {
        return window.localStorage.url + "/BaseSysUser/uploadFile/docsign"
      },
      showSignBox(code) {
        this.code = code;
        this.$http.get(window.localStorage.url + '/BaseSysUser/getUserByCode?code=' + this.code).then(response => {
          // this.sysUser = response.data;
          const imgUrl = response.data.data.signUrl;
          if (imgUrl != undefined) {
            this.imageUrl = window.localStorage.staticUrl + imgUrl;
          }
        })
        this.signBox = true
        this.imageUrl='';
      },
      saveSign() {
        this.$http.get(window.localStorage.url + '/BaseSysUser/updateSignUrl?imgUrl=' + this.signUrl + "&code=" + this.code).then(response => {
          this.$notify.success({
            title: '成功',
            message: response.data.data,
            duration: 1500,
            offset: 35
          });
          this.refresh();
        })
        this.signBox = false
      },
      closeSignBox() {
        this.signBox = false
        this.imageUrl='';
        this.refresh();
      },

      //公共弹窗
      addModal:function (text,time) {
        $pg.popup({
          text:text,//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          btnToggle:{
            btnDetermine:true,//确定按钮是否显示
            btnCancel:false,//取消按钮是否显示
          },
          timeOut:time,
        });
      },


      add_user(){
        this.$http.get(window.localStorage.url+"/BaseSysUser/findMaxNum")
          .then(function (res) {

              this.usersortnum = res.data.data;

//            console.log(this.usersortnum);
          });

        this.ks_motai=true;
        this.variate=1;
        this.name="";
        this.username="";
        this.password="";
        this.email="";
        this.isuse=1;
        this.usepacs=1;
//        this.sortnum=sortnum;
        this.source="";
        this.sourcecode="";
//        this.actorcode="";
        this.memo="";

        this.$http.get(window.localStorage.url+"/BaseSysUser/getactor")//角色默认第一个
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              this.actors=res.data.data;
              this.actorcode=res.data.data[0].code;
//              console.log(this.actorcode+"--**"+res.data.data[0].code)
            }
          });


      },
      update(id,code,name,username,password,email,source,sourcecode,isuse,sortnum,memo,actorcode,usepacs){

        this.$http.get(window.localStorage.url+"/BaseSysUser/getactor")//角色默认第一个
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              this.actors=res.data.data;
//              this.actorcode=res.data.data[0].code;
//              console.log(this.actorcode+"--**"+res.data.data[0].code)
            }
          });

        this.userid=id;
        this.usercode=code;
      if(name!=undefined){this.name=name;}
        this.username=username;
        this.password=password;
      if(email!=undefined){ this.email=email;}
        this.isuse=isuse;
      if(source!=undefined){ this.source=source;}
      if(sourcecode!=undefined){ this.sourcecode=sourcecode;}
      if(actorcode!=undefined){ this.actorcode=actorcode;}
      if(memo!=undefined){ this.memo=memo;}
      if(sortnum!=undefined){this.usersortnum=sortnum;}

      this.usepacs=usepacs;
        this.ks_motai=true;
        this.variate=2;
      },
      deleteSysUser(code,id){
        var _this=this;
//        console.log(code);
        $pg.popup({
          text:"确定删除吗？",//显示的文本
          btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
          btnBgColor:'#4f56a3',//按钮的颜色
          determine:function(){
//            console.log("546464646")
            _this.$http.get(window.localStorage.url+"/BaseSysUser/deleteSysUser?code="+code+"&id="+id)
              .then(function (res) {
                if (res.data.status == 'SUCCESS') {
                  _this.$http.get(window.localStorage.url+"/BaseSysUser/findsysUser")
                    .then(function (res1) {
                      if(res.data.status=='SUCCESS') {
                        _this.SysUsers=res1.data.data;
                      }
                    });

                  this.addModal(res.data.data,1);//公共弹窗

                }else{
                  this.addModal(res.data.data,true);//公共弹窗
                }
              });

          },//点击确定执行的方法
        });


      },
      queren(){
//      console.log(this.deptname,this.pycode,this.isuse,this.sortnum)

        if(!this.name){
          $pg.popup({
            text:"用户名称不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            btnToggle:{
              btnDetermine:true,//确定按钮是否显示
              btnCancel:false,//取消按钮是否显示
            },
            timeOut:1,
            determine:function(){

            },//点击确定执行的方法
          });
        }
        if(!this.username){
          $pg.popup({
            text:"登录名称不能为空！",//显示的文本
            btnClass:'delete',//确定按钮的类值  必传  方便查找确定按钮的class值reBtn
            btnBgColor:'#4f56a3',//按钮的颜色
            btnToggle:{
              btnDetermine:true,//确定按钮是否显示
              btnCancel:false,//取消按钮是否显示
            },
            timeOut:1,
            determine:function(){

            },//点击确定执行的方法
          });
        }



        if(this.variate==1){
          this.$http.get(window.localStorage.url+"/BaseSysUser/addSysUser?name="+this.name+"&username="+this.username+"&password="+this.password+"&email="+this.email
          +"&source="+this.source+"&sourcecode="+this.sourcecode+"&isuse="+this.isuse+"&actorcode="+this.actorcode+"&sortnum="+this.usersortnum+"&memo="+this.memo+"&usepacs="+this.usepacs)
            .then(function (res1) {
//              console.log("添加"+res1.data.status);
              if(res1.data.status=='SUCCESS') {
                this.ks_motai=false;
                this.$http.get(window.localStorage.url+"/BaseSysUser/findsysUser")
                  .then(function (res) {
                    if(res.data.status=='SUCCESS') {
                      this.SysUsers=res.data.data;

                      this.addModal(res1.data.data,1);//公共弹窗
                    }
                  });

              }else{

                this.addModal(res1.data.data,true);//公共弹窗

              }

            });
        }
        if(this.variate==2){

          this.$http.get(window.localStorage.url+"/BaseSysUser/updateSysUser?name="+this.name+"&username="+this.username+"&password="+this.password+"&email="+this.email
            +"&source="+this.source+"&sourcecode="+this.sourcecode+"&isuse="+this.isuse+"&actorcode="+this.actorcode+"&sortnum="+this.usersortnum+"&memo="+this.memo+"&id="+this.userid+"&code="+this.usercode+"&usepacs="+this.usepacs)
            .then(function (res1) {
              if(res1.data.status=='SUCCESS') {
                this.ks_motai=false;
                this.$http.get(window.localStorage.url+"/BaseSysUser/findsysUser")
                  .then(function (res) {
                    if(res.data.status=='SUCCESS') {
                      this.SysUsers=res.data.data;
                    }
                  });

                this.addModal(res1.data.data,1);//公共弹窗

              }else{
                this.addModal(res1.data.data,true);//公共弹窗
              }
            });
        }

      },

      qvxiao(){
        this.ks_motai=false;
      },
      refresh() {
        this.$http.get(window.localStorage.url+"/BaseSysUser/findsysUser")
          .then(function (res) {
            this.loading=false
            if(res.data.status=='SUCCESS') {
              this.SysUsers=res.data.data;
            }
          });

        this.$http.get(window.localStorage.url+"/BaseSysUser/getactor")
          .then(function (res) {
            if(res.data.status=='SUCCESS') {
              this.actors=res.data.data;
            }
          });
      },
    },
    filters:{
      //过滤器
      usefilter(isuse){
        if(isuse==1){
          return "是";
        }else {
          return "否";
        }
      },

      usePacsfileter(usePacs){
        if(usePacs==1){
          return "是";
        }else {
          return "否";
        }
      },

      length6(text){
        text=$.trim(text)+"";
        if(text.length>=7){
          text=text.slice(0,6);
          text=text+"...";
          return text;
        }else{
          return text;
        }
      },

    },
//  components: {'other-component': OtherComponent, HeaderComponent,}add_ks()
  }
</script>
<style scoped>
  /*body {*/
  /*background-color: #ff0000;*/
  /*}*/
  .ris_cont_headHint {
    height: 40px;
    background-color: #999;
    color: #f1f1f1;
    line-height: 40px;
    padding-left: 30px;
    box-sizing: border-box;
  }


  /*新增按钮*/
  .ris_cont_headHint_add{
    width: 70px;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    float: right;
    background-color: #666;
    color: #fff;
    cursor: pointer;
  }
  /*内容区*/
  .ris_cont_dept{
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
  }
  .ris_cont_dept_tab{
    width: 100%;
    line-height: 40px;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
  }
  .ris_cont_dept_tab tr td,.ris_cont_dept_tab tr th{
    border: 1px solid #ddd;
  }
  .ris_cont_dept_tab tr th{
    background-color: #666;
    color: #fff;
  }
  .ris_cont_dept_tab tr td:last-child{
    width: 18%;
  }
  .ris_cont_dept_tab tr td:last-child button{
    width: 26%;
    height: 26px;
    margin: 0 3%;
    background-color: #215c84;
    color: #fff;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
  }
  .ris_cont_dept_tab tr td:last-child button:hover{
    background-color: #1a4161;
  }


  /*点击删除弹出的模态框*/
  .ris_dept_delete{
    position: fixed;
    z-index: 800;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(66,66,66,.2);
    display: none;
  }
  .ris_dept_delete>div{
    position: absolute;
    width: 260px;
    height: 150px;
    left: 50%;
    top: 50%;
    margin-left: -130px;
    margin-top: -75px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: #fff;
  }
  .ris_dept_delete_head{
    height: 30px;
    text-align: right;
    background-color: #999;
    border-radius: 10px 10px 0 0 ;
  }
  .ris_dept_delete_head span{
    display: inline-block;
    padding: 0 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  /*文字*/
  .ris_dept_delete_text{
    line-height: 70px;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
  }
  /*按钮*/
  .ris_dept_delete_btn{
    text-align: right;
  }
  .ris_dept_delete_btn button{
    width: 70px;
    background-color: #215c84;
    color: #fff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    height: 30px;
    margin-right: 20px;
  }
  .ris_dept_delete_btn button:hover{
    background-color: #1a4161;
  }

  .ris_cont {
    width: 95%;
    min-width: 1300px;
    /* border: 1px solid red; */
    /*min-height: 700px;*/
    margin: 50px auto 70px;
  }

  /*新增或修改的模态*/
  .ris_dept_modal9{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(66,66,66,.2);
    z-index: 200;
    /*display: none;*/
  }
  .ris_dept_modal9>div{
    position: absolute;
    width: 400px;
    height: 530px;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -265px;
    border: 1px solid #000;
    background: #f7f7f7;
    border-radius: 10px;
  }
  /*模态头部*/
  .ris_dept_modal_head9{
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    border-bottom: 1px solid #666;
    background: #999;
    border-radius: 10px 10px 0 0;
    font-size: 14px;
    color: #fff;
  }
  .ris_dept_modal_head9 span{
    display: inline-block;
    float: right;
    padding: 0 20px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
  }
  /*模态里面的内容*/
  .ris_dept_modal_tab9{
    width: 85%;
    margin: 0 auto;
    line-height: 33px;
    margin-top: 20px;
  }
  .ris_dept_modal_tab9 tr td:nth-child(1){width: 20%}
  .ris_dept_modal_tab9 tr td:nth-child(2){width: 80%}
  .ris_dept_modal_tab9 tr td input,.ris_dept_modal_tab9 tr td select{
    width: 100%;
    height: 28px;
    border: 1px solid #666;
    border-radius: 3px;
    box-sizing: border-box;
  }
  .ris_dept_modal_tab9 tr td textarea{
    width: 100%;
    height: 60px;
    border: 1px solid #666;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 5px;
    margin-top: 10px;
  }
  .ris_dept_modal_btn9{
    text-align: center;
  }
  .ris_dept_modal_btn9 button{
    width: 80px;
    height: 36px;
    background-color: #215c84;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    margin: 0 15px;
  }
  .ris_dept_modal_btn9 button:hover{
    background-color: #1a4161;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
